import { fabric } from 'fabric';

import ObjectPool from './ObjectPool';

class Ellipse extends fabric.Ellipse {
  constructor(options = {}) {
    const defaultOptions = {
      left: 100,
      top: 100,
      rx: 75, // 水平半径
      ry: 50, // 垂直半径
      fill: '#3498db',
      strokeWidth: 1,
      stroke: '#000000',
      selectable: true,
      cornerSize: 10,
      transparentCorners: false,
      hasRotatingPoint: true,
      padding: 5,
      id: '',  // 添加id属性
    };

    // 合并默认选项和传入的选项
    const mergedOptions = {
      ...defaultOptions,
      ...options,
    };

    // 确保控制点颜色与边框颜色一致
    mergedOptions.cornerColor = mergedOptions.stroke;
    mergedOptions.borderColor = mergedOptions.stroke;

    super(mergedOptions);

    // 如果提供了canvas，自动添加到画布
  }

  // 更新属性
  updateProps(props) {
    this.set(props);
    // 如果更新了边框颜色，同时更新控制点颜色
    if (props.stroke) {
      this.set({
        cornerColor: props.stroke,
        borderColor: props.stroke,
      });
    }
    this.canvas?.requestRenderAll();
    return this;
  }

  // 移到顶层
  bringToFront() {
    if (this.canvas) {
      this.canvas.bringToFront(this);
      this.canvas.requestRenderAll();
    }
    return this;
  }

  // 移到底层
  sendToBack() {
    if (this.canvas) {
      this.canvas.sendToBack(this);
      this.canvas.requestRenderAll();
    }
    return this;
  }

  // 删除自身
  remove() {
    if (this.canvas) {
      this.canvas.remove(this);
      this.canvas.requestRenderAll();
    }
  }
}

// 创建一个全局的椭圆对象池
const ellipsePool = new ObjectPool(() => new Ellipse());

// 导出Ellipse类和ellipsePool
export { Ellipse, ellipsePool };
export default Ellipse;
